<!DOCTYPE html>
<html lang="en">
<head>
    <title>Yuan | City</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="../css/font-awesome.min.css" type="text/css">
    <link rel="stylesheet" href="../css/themify-icons.css" type="text/css">
    <link rel="stylesheet" href="../css/elegant-icons.css" type="text/css">
    <link rel="stylesheet" href="../css/owl.carousel.min.css" type="text/css">
    <link rel="stylesheet" href="../css/nice-select.css" type="text/css">
    <link rel="stylesheet" href="../css/jquery-ui.min.css" type="text/css">
    <link rel="stylesheet" href="../css/slicknav.min.css" type="text/css">
    <link rel="stylesheet" href="../css/style.css" type="text/css">
    <link rel="stylesheet" href="../css/susu.css" type="text/css">
    <!-- Js Plugins -->
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/jquery-ui.min.js"></script>
    <script src="../js/jquery.countdown.min.js"></script>
    <script src="../js/jquery.nice-select.min.js"></script>
    <script src="../js/jquery.zoom.min.js"></script>
    <script src="../js/jquery.dd.min.js"></script>
    <script src="../js/jquery.slicknav.js"></script>
    <script src="../js/owl.carousel.min.js"></script>

</head>
<body>
<!--头部引入-->
<div class="su_head ">
</div>

<br />



<!--内容-->
<section class="product-shop spad">
    <div class="container">
        <div class="row">
            <div class="product-list" >
                <div class="row " id="su_item">

                </div>
            </div>
        <!-- 分页-->
            <div class="text-right " style="position:absolute;    margin-left: 1050px;">
                <a href="#" class="  btn primary-btn" onclick="javascript:alert('暂无更多！')">查看更多>></a>
            </div>
        </div>
    </div>

</section>


<!-- Footer Section Begin -->
<footer class="footer-section">
    <div class="copyright-reserved container">
        <div class="row">
            <div class="col-lg-12">
                <div class="copyright-text" style="text-align: center;">
                    Copyright &copy;<script>document.write(new Date().getFullYear());</script> Yuan City
                </div>
            </div>

        </div>
    </div>
</footer>
<!-- Footer Section End -->

</body>
<script type="text/javascript">

    //调用公共头部
    $('.su_head').load('head.html');
    $(document).ready(function () {
        //获取导航栏
        $.ajax({
            type: 'get',
            url: '/ayuancity/categorys/getcategoryAndtype',
            success: function (res) {
                // console.log( $('.su_nav').text())
                for (let i=0;i<res.content.data.length;i++) {

                    let nav = res.content.data[i];
                    var category =
                        `
							<li id="${nav.categoryName}" class="${nav.categoryName}" >
							<a href="itemsPage.html?categoryName=${nav.categoryName}">${nav.categoryName}</a>
							`;
                    var drop='';
                    var type='';
                    if (nav.types.length > 0) {
                        drop =  ` <ul class="dropdown "  >`
                        for (let j = 0; j < nav.types.length; j++) {
                            type = type+ `<li><a href="itemsPage.html?categoryName=${nav.categoryName}&typeName=${nav.types[j].typeName}">${nav.types[j].typeName}</a></li>`

                        }
                        type=type+ `</ul>`
                    }
                    var template= category+ drop+type+ ` </li>`;
                    $('.su_nav').append(template);

                }

                let url = location.href;
                let categoryName = new URL(url).searchParams.get('categoryName');
                if (categoryName==null ||categoryName==''){
                    location.href = 'index.html';
                }else{

                    $('.'+categoryName).addClass("active")
                }
                // console.log($('.su_head').text());
            }

        });

        //获取类型参数
        let url = location.href;
        let categoryName = new URL(url).searchParams.get('categoryName');
         if (categoryName==null ||categoryName==''){
             location.href = 'index.html';
         }else{

             $('.'+categoryName).addClass("active")
         }
        let typeName = new URL(url).searchParams.get('typeName');
       $.ajax({
           type: 'get',
           url: '/ayuancity/infos/list',
           data:{
               categoryName: categoryName,
               typeName: typeName,
               infoState:2,  //2表示发布中
               pageSize: 20
           },
           success: function (res) {
               if (res.content.data.total>0){
                   for (let i=0;i<res.content.data.total;i++){
                       let item= res.content.data.list[i];
                       let template =
                           `
                                  <div class="col-sm-6 col-md-4 col-lg-3" onmouseover="mOver(this)" onmouseout="mOut(this)">
							<div class="thumbnail center-block ">
								<div class="product-item">
									<div class="pi-pic">
								<img
								src="${item.infoImg}">

								<div class="caption">
									<h5 class="le-price le-text">￥${item.infoPrice}</h5>
									<p class="le-title">${item.infoContent}</p>
						        	<p class="le-address">地 址: <a>${item.infoAddress}</a></p>
									<p class="le-shop">${item.categoryName}-${item.infoTitle}</p>
									<ul style="	margin-bottom: 33px;" class="hidden" id="freezixun">
										<li class="w-icon active"><a href="#"><i class="icon_tablet"></i></a></li>
										<li class="quick-view"><a href="./itemDetail.html?infoId=${item.infoId}">+ 免费咨询</a></li>
										<li class="w-icon"><a href="#"><i class="fa fa-random"></i></a></li>
									</ul>
								</div>
							</div>
						</div>
							</div>
						</div>
                                `;
                       $('#su_item').append(template);
                   }
               }
           }
       })
        // 判断是否登录 已登录 显示昵称
        let citytoken = sessionStorage.getItem('citytoken');
        if (citytoken) {
            $.ajax({
                type: 'GET',
                url: '/city/user/info',
                data: {
                    token: citytoken
                },
                success: function (json) {
                    if (json.success) {
                        let username = json.content.user.userName;
                        // console.log(json)
                        $('#yuan-login').html(username);
                        // $('#user-showname').html(showname);
                        $('#yuan-login').attr('data-toggle', 'dropdown');
                        $('#yuan-userImg').removeClass("hidden");
                        $('#yuan-userImg').removeClass("hidden");
                        $('#yuan-userImg').attr("src",json.content.user.userImg);
                    }
                }
            });
        }


    });

function searinfo() {
    let info = $("#searchInfotext").val();
    let address = $("#address").val();
    let url = location.href;
    let categoryName = new URL(url).searchParams.get('categoryName');
    let typeName = new URL(url).searchParams.get('typeName');
    $.ajax({
        type: 'get',
        url: '/ayuancity/infos/list',
        data: {
            infoContent: info,
            infoAddress: address,
            categoryName: categoryName,
            typeName: typeName,
            infoState: 2,  //2表示发布中
            pageSize: 20
        },
        success: function (res) {
            //删除
            $('#su_item').children("div").remove();
            if (res.content.data.total > 0) {
                for (let i = 0; i < res.content.data.total; i++) {
                    let item = res.content.data.list[i];
                    let template =
                        `
                                  <div class="col-sm-6 col-md-4 col-lg-3" onmouseover="mOver(this)" onmouseout="mOut(this)">
							<div class="thumbnail center-block ">
								<div class="product-item">
									<div class="pi-pic">
								<img
								src="${item.infoImg}">

								<div class="caption">
									<h5 class="le-price le-text">￥${item.infoPrice}</h5>
									<p class="le-title">${item.infoContent}</p>
						        	<p class="le-address">地 址: <a>${item.infoAddress}</a></p>
									<p class="le-shop">${item.categoryName}-${item.infoTitle}</p>
									<ul style="	margin-bottom: 33px;" class="hidden" id="freezixun">
										<li class="w-icon active"><a href="#"><i class="icon_tablet"></i></a></li>
										<li class="quick-view"><a href="./itemDetail.html?infoId=${item.infoId}">+ 免费咨询</a></li>
										<li class="w-icon"><a href="#"><i class="fa fa-random"></i></a></li>
									</ul>
								</div>
							</div>
						</div>
							</div>
						</div>
                                `;
                    $('#su_item').append(template);
                }
            }
        }
    })


}

    function loginout() {
        $.ajax({
            type: 'POST',
            url: '/city/user/OutLogin',
            success: function (json) {
                if (json.success) {
                    sessionStorage.removeItem('citytoken');
                    alert("欢迎下次登录")
                    location.href = 'index.html';
                }
            }
        });



    }


    function mOver(obj){
        obj.getElementsByTagName("ul")[0].className=""
      // $("#freezixun").removeClass("hidden")  //因为for循环的div的id都是freezixun
    }
    function mOut(obj){
        obj.getElementsByTagName("ul")[0].className="hidden"
        // $("#freezixun").addClass("hidden")
    }
</script>

<!-- Js Plugins -->
<script src="../js/main.js"></script>
</html>